<!-- 定时任务编辑弹窗 -->
<template>
  <div class="ele-body">
    <a-card :title="scheduledTaskModalApp.title" :bordered="false">
      <a-form
        ref="form2"
        :model="scheduledTaskModalApp.scheduledTask"
        :rules="scheduledTaskModalApp.rules"
        :label-col="{md: {span: 7}, sm: {span: 24}}"
        :wrapper-col="{md: {span: 17}, sm: {span: 24}}">
        <a-row :gutter="16">

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="任务名称:" name="jobName">
              <a-input
                :disabled="scheduledTaskListApp.editModalForEdit"
                v-model:value="scheduledTaskModalApp.scheduledTask.jobName"
                placeholder="请输入任务名称"
                :maxlength="255"
                allow-clear
              />
            </a-form-item>
          </a-col>

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="任务分组:" name="jobGroup">
              <a-input
                :disabled="scheduledTaskListApp.editModalForEdit"
                v-model:value="scheduledTaskModalApp.scheduledTask.jobGroup"
                placeholder="请输入任务分组"
                :maxlength="255"
                allow-clear
              />
            </a-form-item>
          </a-col>

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
<!--            -->
            <a-form-item label="cron表达式:" name="cron">
<!--              <a-input-->
<!--                v-model:value="scheduledTaskModalApp.scheduledTask.cron"-->
<!--                placeholder="请输入cron表达式"-->
<!--                :maxlength="255"-->
<!--                allow-clear-->
<!--              />-->
              <j-cron v-model:value="scheduledTaskModalApp.scheduledTask.cron" @change="(val)=>{scheduledTaskModalApp.scheduledTask.cron=val}"></j-cron>
<!--              <j-cron v-decorator="['cronExpression', {'initialValue':'0/1 * * * * ?',rules: [{ required: true, message: '请输入cron表达式!' }]}]"  ></j-cron>-->

              <!--              <j-cron ref="innerVueCron" v-decorator="['cronExpression', {'initialValue':'0/1 * * * * ?',rules: [{ required: true, message: '请输入cron表达式!' }]}]"  ></j-cron>-->
            </a-form-item>
          </a-col>

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="接口Bean:" name="beanName">
<!--              <a-input-->
<!--                v-model:value="scheduledTaskModalApp.scheduledTask.beanName"-->
<!--                placeholder="请输入接口Bean"-->
<!--                :maxlength="255"-->
<!--                allow-clear-->
<!--              />-->
              <a-select v-model:value="scheduledTaskModalApp.scheduledTask.beanName" @select="selectBean">
                <a-select-option v-for="(item,index) in beanNames" :key="index" :value="item">{{ item }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :lg="6" :md="12" :sm="24" :xs="24" v-if="scheduledTaskModalApp.scheduledTask.beanName">
            <a-form-item label="方法:" name="methodName">
              <a-select v-model:value="scheduledTaskModalApp.scheduledTask.methodName" >
                <a-select-option v-for="(item,index) in methodNames" :key="index" :value="item">{{ item }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :lg="12" :md="24" :sm="24" :xs="24">
            <a-form-item label="方法参数:" name="methodParams">
              <a-textarea
                v-model:value="scheduledTaskModalApp.scheduledTask.methodParams"
                placeholder="请输入方法参数"
                allow-clear
              />
            </a-form-item>
          </a-col>

          <a-col :md="12" :sm="24" :xs="24">
            <a-form-item :wrapper-col="{md: {offset: 6}}" style="margin-bottom: -20px">
              <!--class="ele-pull-right"-->
              <div v-if="scheduledTaskModalApp.display">
                <teleport to="#scheduledTaskEditModalFooter">
                  <div>
                    <a-space size="middle">
                      <a-button @click="scheduledTaskListApp.editModalShowing=false">取消
                      </a-button>
                      <a-button
                        type="primary"
                        @click="onSubmit(scheduledTaskModalApp.scheduledTask)"
                        :loading="loading">提交
                      </a-button>
                      <!--<a-button v-if="!eid"
                                type="dashed"
                                @click="continueSubmit"
                                :loading="loading">继续提交
                      </a-button>-->
                    </a-space>
                  </div>
                </teleport>
              </div>
              <div v-if="!scheduledTaskModalApp.display">
                <a-space size="middle">
                  <a-button @click="onBack()">返回列表</a-button>
                  <a-button
                    type="primary"
                    @click="onSubmit(scheduledTaskModalApp.scheduledTask)"
                    :loading="loading">提交
                  </a-button>
                  <!--<a-button v-if="!eid"
                            type="dashed"
                            @click="continueSubmit"
                            :loading="loading">继续提交
                  </a-button>-->
                </a-space>
              </div>

            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

  </div>

</template>

<script>
import {defineComponent, inject, reactive, onMounted,ref} from 'vue'
import {useRoute, useRouter} from "vue-router"
import {ScheduledTaskService} from "@/views/system/scheduledTask/scheduledTask/scheduledTaskService";
import {VXETable} from 'vxe-table'
import {useStore} from "vuex";
import regions from 'ele-admin-pro/packages/regions.js';
import JCron from "@/components/Cron/JCron";

export default defineComponent({
  components: {JCron},
  setup() {
    // 省市区数据
    const cityData = regions
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    let routeId = route.params.id;
    let scheduledTaskListApp = inject('scheduledTaskListApp', reactive({}));
    let scheduledTaskGrid = inject('scheduledTaskGrid', reactive({}))
    const scheduledTaskModalApp = reactive({
      id: null,
      scheduledTask: {},
      isEdit: false,
      display: false
    });
    scheduledTaskModalApp.rules = {
      jobName: [
        {
          required: false,
          type: 'string',
          message: '请输入任务名称',
          trigger: 'blur'
        }
      ],
      jobGroup: [
        {
          required: true,
          type: 'string',
          message: '请输入任务分组',
          trigger: 'blur'
        }
      ],
      cron: [
        {
          required: false,
          type: 'string',
          message: '请输入cron表达式',
          trigger: 'blur'
        }
      ],
      beanName: [
        {
          required: false,
          type: 'string',
          message: '请输入接口Bean',
          trigger: 'blur'
        }
      ],
      methodName: [
        {
          required: false,
          type: 'string',
          message: '请输入方法',
          trigger: 'blur'
        }
      ],
      methodParams: [
        {
          required: false,
          type: 'string',
          message: '请输入方法参数',
          trigger: 'blur'
        }
      ],
    }

    onMounted(() => {
      //清理数据
      scheduledTaskModalApp.scheduledTask = reactive({});
      if (routeId) {//路由
        scheduledTaskModalApp.id = routeId;
        scheduledTaskModalApp.display = false;
        // findScheduledTask(scheduledTaskModalApp.id);
      } else if (scheduledTaskListApp.editModalForEdit) {//修改弹窗
        // scheduledTaskModalApp.id = scheduledTaskListApp.currentId;
        scheduledTaskModalApp.scheduledTask=scheduledTaskListApp.task
        scheduledTaskModalApp.display = true;
      } else if (!scheduledTaskListApp.editModalForEdit && scheduledTaskListApp.addModalForEdit) {//新增弹窗
        scheduledTaskModalApp.display = true;
        scheduledTaskModalApp.scheduledTask={};
      } else {
        scheduledTaskModalApp.title = "新增";
      }
      // if (scheduledTaskModalApp.id) findScheduledTask(scheduledTaskModalApp.id);
    })

    // const findScheduledTask = (id) => {
    //   ScheduledTaskService.findScheduledTaskForView(id).then((res) => {
    //     scheduledTaskModalApp.scheduledTask = res.data;
    //     //TODO:为编辑准备.
    //     scheduledTaskModalApp.title = "编辑 " + scheduledTaskModalApp.scheduledTask.name;
    //   }).catch(error => {
    //     VXETable.modal.message({content: `查找出错，原因是：${error.message}`, status: 'error'});
    //   })
    // }

    /*TODO:提交 新增&编辑*/
    const onSubmit = (data) => {
      // debugger;
      //当为数组时用逗号连接
      if (data.status) {
        //修改
        ScheduledTaskService.updateScheduledTask(data).then((res) => {
          console.log(res);
          VXETable.modal.message({content: '操作成功', status: 'success'});
          setTimeout(onBack, 3000);
        }).catch(error => {
          VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
        })
      } else {
        //新增
        ScheduledTaskService.saveScheduledTask(data).then((res) => {
          console.log(res);
          VXETable.modal.message({content: '操作成功', status: 'success'});
          setTimeout(onBack, 3000);
        }).catch(error => {
          VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
        })
      }
    }

    /*TODO:继续提交*/
    const continueSubmit = () => {
      VXETable.modal.message({content: 'error 提示', status: 'error'});
    }
    const serviceMap=ref({});
    const beanNames=ref([]);
    const methodNames=ref([]);
    const findServices = () => {
      ScheduledTaskService.findServices().then(res=>{
        serviceMap.value=res.data;
        beanNames.value=Object.keys(res.data)
      })
    }
    const selectBean = (param) => {
      methodNames.value=serviceMap.value[param];
    }
    findServices()
    /*TODO:返回列表*/
    const onBack = () => {
      router.push(`/system/scheduledTask/scheduledTask`);
      store.dispatch('user/tabRemove', route.fullPath);
      setTimeout(() => {
        scheduledTaskGrid.value.commitProxy("query");
      }, 1500);
      scheduledTaskListApp.editModalShowing = false;
    }
    return {
      cityData,
      routeId,
      scheduledTaskListApp,
      scheduledTaskModalApp,
      onSubmit,
      continueSubmit,
      onBack,
      beanNames,
      selectBean,
      methodNames
    }

  },
})
</script>

<style scoped>

</style>
